<template>
  <div class="buttonItem">
    <div class="label">{{ inputLabel }}</div>

    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'

const props = defineProps({
  label: { type: String, defalut: 'Operation' },
})

onMounted(() => {
  labelHandle()
})

watch(
  () => props.label,
  () => labelHandle()
)

// 输入框标签
const inputLabel = ref<string>('Operation')
const labelHandle = () => {
  if (!props.label) return (inputLabel.value = 'Operation')

  if (props.label.trim().length === 0) inputLabel.value = 'Operation'
  else inputLabel.value = props.label
}
</script>

<style scoped lang="less">
.buttonItem {
  height: 40px;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 15px;
  background-color: #cfcdcd21;

  > .label {
    min-width: 120px;
    height: 100%;
    font-size: 15px;
    font-weight: bold;
    color: #606266;
    user-select: none;
    background-color: #c8e0e4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    padding-left: 5px;
    padding-right: 5px;
  }
}
</style>
